<template>
  <div id="main">
    <div style="padding-left: 39%;padding-top: 12%;">
      <el-card class="box-card" shadow="always">
        <el-tabs v-model="tab" @tab-click="getImg">
          <el-tab-pane name="登  录">
            <span class="tab-slot" slot="label">登  录</span>
            <el-form :label-position="'left'">
              <el-form-item label="账 号">
                <el-input style="width: 76%; margin-left: 10px" v-model="user"></el-input>
              </el-form-item>
              <el-form-item label="密 码">
                <el-input style="width: 76%; margin-left: 10px" type="password" v-model="password"></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <el-row>
                  <el-col :span="8">
                    <el-input v-model="code" placeholder="验证码"></el-input>
                  </el-col>
                  <el-col :span="10">
                    <div style="margin-left: 20px;">
                      <img style=" border-radius: 6px" :src="img" alt="" @click="getImg">
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item style="text-align: center; padding-top: 10px; font-family: 黑体">
                <el-button type="primary" @click="doLogin">{{ tab }}</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="注  册">
            <span class="tab-slot" slot="label">注  册</span>
            <el-form :label-position="'left'">
              <el-form-item label="账 号">
                <el-input style="width: 80%;" v-model="user"></el-input>
              </el-form-item>
              <el-form-item label="密 码">
                <el-input style="width: 80%;" type="password" v-model="password"></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <el-row>
                  <el-col :span="8">
                    <el-input v-model="code" placeholder="验证码"></el-input>
                  </el-col>
                  <el-col :span="10">
                    <div style="margin-left: 20px;">
                      <img style=" border-radius: 6px" :src="img" alt="" @click="getImg">
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item style="text-align: center; padding-top: 10px; font-family: 黑体">
                <el-button type="primary" @click="doRegister">{{ tab }}</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      tab: '登  录',
      user: '',
      password: '',
      code: '',
      img: '',
      uuid: ''
    }
  },
  created() {
    this.getImg();
  },
  methods: {
    getImg(){
      this.$axios.get("/api/kaptCha").then(res=>{
        if (res.data.code === '200'){
          this.img = 'data:image/png;base64,'+ res.data.data.img;
          this.uuid = res.data.data.uuid;
        }else{
          this.$message.error(res.data.message);
        }
      })
    },
    doLogin() {
      this.$axios.post("/api/login", {
        account: this.user,
        password: this.password,
        code: this.code,
        uuid: this.uuid
      }).then(res => {
        if (res.data.code === '200') {
          localStorage.setItem("loginMes", JSON.stringify(res.data.data));
          this.$router.push('/')
        } else {
          this.$message.error(res.data.message);
          this.getImg();
        }
      });
      this.uuid = '';
      this.code = '';
    },
    doRegister() {
      this.$axios.post("/api/register",{
        account: this.user,
        password: this.password,
        code: this.code,
        uuid: this.uuid
      }).then(res=>{
        if(res.data.code === '200'){
          this.$message.success(res.data.message);
        }else {
          this.$message.error(res.data.message);
          this.getImg();
        }
      });
      this.uuid = '';
      this.code = '';
    }
  }
}
</script>

<style scoped>
#main {
  width: 100%;
  height: 100%;
  background-image: url("../../../static/indexBackground.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}

.box-card {
  width: 440px;
}

.el-form-item {
  padding-top: 15px;
}

/deep/ .el-tabs__item {
  font-size: 18px;
  font-family: "DejaVu Sans Mono";
}

.tab-slot {
  padding: 0 20px;
}
</style>
